<template>
	<view :style="[{paddingTop:(CustomBar+10)+'px'},{paddingBottom:'50px'},{backgroundColor:'#fff'}]">
		<cu-custom bgColor="bg-white" :isBack="true">
			<block slot="backText"></block>
			<block slot="content">查看物流</block>
		</cu-custom>
		<view class="logistis">
			<view class="top">
				<image :src="logData.logo" mode=""></image>
				<view class="">
					<view class="">
						<text>物流公司：</text>
						<text>{{logData.deliverExpress}}</text>
					</view>
					<view class="">
						<text>物流编号：</text>
						<text>{{logData.deliverExpressCode}}</text>
					</view>
					<view class="">
						<text>物流电话：</text>
						<text>{{logData.deliverExpressPhone}}</text>
					</view>
				</view>
			</view>
			<view class="bottom">
				<view class="title">
					<image src="https://xarkbucket.oss-cn-hangzhou.aliyuncs.com/resources/logistics-process.png" mode=""></image>
					<text>物流进度</text>
				</view>
				<view class="step" v-if="logData.deliverExpressList.length>0">
					<uni-steps :options="logData.deliverExpressList" direction="column" :active-color="'#F34930'" :active="logData.deliverExpressList.length-1"></uni-steps>
				</view>
				<view class="noconten" v-if="logData.deliverExpressList.length==0">
					暂无物流信息
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import uniSteps from "../component/uni-steps.vue"
	export default {
		components: {
			uniSteps
		},
		data() {
			return {
				orderId: '',
				CustomBar: this.CustomBar,
				logData: {}
			}
		},
		onLoad(options) {
			this.orderId = options.id
			this.getDetail()
		},
		onReady() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
		},
		methods: {
			getDetail() {
				var that = this
				that.$request({
					url: '/ShopOrders/get_order_express',
					data: {
						id: this.orderId
					},
					success: res => {
						if (res.data.status == 1) {
							var result = res.data.data
							if (result.deliverExpressList.length > 0) {
								result.deliverExpressList = result.deliverExpressList.reverse()
								result.deliverExpressList.forEach(item => {
									item['title'] = item.status
									item['desc'] = item.time
								})
							}
							that.logData = result
							uni.hideLoading()
						}
					},
					fail: () => {},
					complete: () => {}
				});
			}
		}
	}
</script>

<style scoped>
	.logistis {
		width: 100%;
		padding: 50rpx 40rpx;
		box-sizing: border-box;
	}

	.logistis .top {
		display: flex;
		width: 100%;
		box-sizing: border-box;
		margin-bottom: 100rpx;
	}

	.logistis .top image {
		width: 160rpx;
		height: 160rpx;
		border-radius: 8rpx;
		margin-right: 15rpx;
	}

	.logistis .top>view {
		flex: 1;
		display: flex;
		flex-direction: column;
		height: 160rpx;
	}

	.logistis .top>view>view {
		flex: 1;
		display: flex;
		align-items: center;
		/* justify-content: center; */
	}

	.logistis .top>view>view>text:nth-child(1) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #666666;
	}

	.logistis .top>view>view>text:nth-child(2) {
		font-size: 28rpx;
		letter-spacing: 1rpx;
		color: #333;
	}

	.logistis .bottom {
		width: 100%;
	}

	.logistis .bottom .title {
		width: 100%;
		height: 48rpx;
		display: flex;
		align-items: center;
	}

	.logistis .bottom .title image {
		width: 48rpx;
		height: 48rpx;
		border-radius: 100%;
		margin-right: 15rpx;
	}

	.logistis .bottom .title text {
		font-size: 30rpx;
		letter-spacing: 1rpx;
		color: #333333;
	}

	.logistis .bottom .step {
		margin-left: -20rpx;
	}

	.noconten {
		color: #F34930;
		line-height: 60rpx;
		font-size: 28rpx;
		padding-left: 60rpx;
		margin-top: 20rpx;

	}
</style>
